<!DOCTYPE html>

<html class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.2.1-rc1/echarts.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css"
    />
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/avue.js"></script>
    <script src="../theme/avue.project.js"></script>
    <script src="../theme/halloween.project.js"></script>
    <script src="../theme/wonderland.project.js"></script>
  </head>

  <body>
    <div id="app">
      <el-button @click="change1">换紫色主题</el-button>
      <el-button @click="change2">换绿色主题</el-button>
      <avue-echart-bar
        :theme="theme"
        ref="echart"
        :width="config.width"
        :height="config.height"
        :option="config"
        :data="apiData"
      >
      </avue-echart-bar>
    </div>
  </body>
  <script>
    window.echarts.registerTheme(theme.themeName, theme.theme);
    window.echarts.registerTheme(theme1.themeName, theme1.theme);
    window.echarts.registerTheme(theme2.themeName, theme2.theme);
    new Vue({
      el: "#app",
      data() {
        return {
          theme: theme.themeName,

          apiData: {
            categories: [
              "城市1",
              "城市2",
              "城市3",
              "城市4",
              "城市5",
              "城市6",
              "城市7",
              "城市8"
            ],
            series: [
              {
                name: "手机品牌",
                linearGradientColor:[
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ],
                    labelFormatter:"{c}(90%)",
                    labelPositon:"top",
                    labelShowColor:"red",
                data: [
                  1131776,
                  1349011,
                  905718,
                  1349011,
                  905718,
                  656020,
                  571234,
                  467397
                ]
              },
              {
                  "name": "其他手机品牌",
                  "barGap":"-100%",
                  labelPositon:'["100%", "10%"]',
                  linearGradientColor:[
                        {offset: 0, color: '#00E2FF'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#0063BF'}
                    ],
                  "data": [
                    113100,
                    134000,
                    905637,
                    134936,
                    90563,
                    65663,
                    57163,
                    46763
                  ]
                }
            ]
          },
          config: {
            // dataZoom: [
            //   {
            //     xAxisIndex: 0, // 这里是从X轴的0刻度开始
            //     show: false, // 是否显示滑动条，不影响使用
            //     type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件  //inside
            //     startValue: 0, // 从头开始。
            //     endValue: 3 // 一次性展示多少个。
            //   }
            // ],
            startValue:0,
            endValue:3,
            // linearGradientColor:[
            //             {offset: 0, color: '#83bff6'},
            //             {offset: 0.5, color: '#188df0'},
            //             {offset: 1, color: '#188df0'}
            //         ],
            isRoll:true,
            xAxisRotate:20,
            switchTheme: true,
            title: "2019年度潍坊城市销售额排名",
            titlePostion: "",
            titleFontSize: 24,
            titleColor: "rgb(115, 170, 229)",
            titleShow: true,
            legend: false,
            width: 500,
            height: 600,
            gridX: 105,
            gridY: 50,
            gridX2: 80,
            gridY2: 100,
            nameColor: "#333",
            lineColor: "#333",
            xNameFontSize: 16,
            yNameFontSize: 16,
            labelShow: false,
            labelShowFontSize: 14,
            labelShowFontWeight: 300,
            yAxisInverse: false,
            xAxisInverse: false,
            xAxisShow: true,
            yAxisShow: true,
            xAxisSplitLineShow: false,
            yAxisSplitLineShow: false,
            refresh: 3000,
            barWidth: 30,
            barRadius: [20, 20, 0, 0],
            labelShow: true,
            barColor: [
              {
                color1: "#83bff6",
                color2: "#188df0",
                postion: 90
              },
              {
                color1: "#23B7E5",
                color2: "#564AA3",
                postion: 50
              }
            ],
            barMinHeight: 2
          }
        };
      },
      mounted() {},
      methods: {
        change1() {
          this.theme = theme1.themeName;
        },
        change2() {
          this.theme = theme2.themeName;
        },
        getVal() {
          try {
            this.apiData = JSON.parse(this.apiText);
          } catch (error) {
            this.$message.error("数据格式错误");
            return;
          }
          this.$message.success("刷新成功");
        },
        handleChange(item) {
          this.type = item.prop;
          if (this.type === "data") {
            this.jsonView();
          }
        },
        jsonView() {
          setTimeout(() => {
            if (!this.apiFirst) {
              this.CodeMirrorEditor = CodeMirror.fromTextArea(
                document.getElementById("code"),
                {
                  lineNumbers: true,
                  mode: "application/json",
                  gutters: ["CodeMirror-lint-markers"],
                  theme: "rubyblue",
                  lint: true
                }
              );
              this.apiText = JSON.stringify(this.apiData, null, 2);
              this.CodeMirrorEditor.setValue(this.apiText);
              this.apiFirst = true;
              this.CodeMirrorEditor.on("change", e => {
                this.apiText = e.getValue();
              });
            }
          }, 0);
        },
        rowSave(row, done) {
          this.config.barColor.push(row);
          done();
        },
        rowDel(row, index) {
          this.config.barColor.splice(index, 1);
        },
        rowUpdate(row, index, done) {
          this.config.barColor.splice(index, 1, row);
          done();
        }
      }
    });
  </script>
</html>
